<template>
<div>
	<Row>
		<Col :span="24">
			<Breadcrumb>
				<BreadcrumbItem to="/" @click.native="changeMenu(0)"><Icon type="home"></Icon> 首页</BreadcrumbItem>
				<BreadcrumbItem :to="{'name':'welisten-order-index'}">订单管理</BreadcrumbItem>
				<BreadcrumbItem>{{title}}</BreadcrumbItem>
			</Breadcrumb>
			<div class="cleaner20"></div>
		</Col>
	</Row>
	<Form ref="vform" :model="vform" :label-width="100"  :rules="ruleValidate">
		<Row type="flex" :gutter="16">
			<Col :span=18>
				<Row type="flex">
					<Col :span="6" :xs="24" :sm="12" :md="6" :lg="6">
						<FormItem label="用户昵称" prop="nickname" @click.native="onSelectUser">
							<Input v-model="vform.nickname" placeholder="请填写昵称" readonly>
								<Icon type="md-search" slot="suffix"></Icon>
							</Input>
						</FormItem>
					</Col>
					<Col :span="6" :xs="24" :sm="12" :md="6" :lg="6">
						<FormItem label="倾听者昵称" prop="lnickname">
							<Input v-model="vform.lnickname" placeholder="请填写昵称" readonly @click.native="onSelectListener">
								<Icon type="md-search" slot="suffix"></Icon>
							</Input>
						</FormItem>
					</Col>
					<Col :xs="24" :sm="12" :md="12" :lg="12">
						<FormItem label="倾听者产品" prop="product">
							<Input :disabled="listenerObj.uid<1" v-model="vform.title" placeholder="请选择产品" readonly @click.native="onSelectProduct">
								<Icon type="md-search" slot="suffix" ></Icon>
							</Input>
						</FormItem>
					</Col>
					<Col :span="6"  :xs="24" :sm="12" :md="6" :lg="6">
						<FormItem label="权重" prop="sequence">
							<InputNumber :max="9999" :min="1" :step="1" v-model="vform.sequence"></InputNumber>
						</FormItem>
					</Col>
					<Col :span="6"  :xs="24" :sm="12" :md="6" :lg="6">
						<FormItem label="服务类型">
							<Button v-if="1==vform.service_type" type="success" >通话</Button>
							<Button v-if="0==vform.service_type" type="info">文字</Button>
						</FormItem>
					</Col>
					<Col :span="6"  :xs="24" :sm="12" :md="6" :lg="6">
						<FormItem label="产品分类">
							<Button v-if="1==vform.product_type" type="success">套餐</Button>
							<Button v-if="0==vform.product_type" type="info">单品</Button>
						</FormItem>
					</Col>
					<Col :span="4"  :xs="24" :sm="12" :md="6" :lg="6">
						<FormItem label="单价">
							<InputNumber readonly v-model="vform.price"></InputNumber>
						</FormItem>
					</Col>
					<Col :span="4"  :xs="24" :sm="12" :md="6" :lg="6">
						<FormItem label="时长">
							<InputNumber :min="vstep" :max="maxQty" :step="vstep" v-model="vform.qty"></InputNumber>
						</FormItem>
					</Col>
					<Col :span="4"  :xs="24" :sm="12" :md="6" :lg="6">
						<FormItem label="优惠金额" prop="discount">
							<InputNumber :max="9999" :min="0" :step="0.01" v-model="vform.discount"></InputNumber>
						</FormItem>
					</Col>
					<Col :span="4"  :xs="24" :sm="12" :md="6" :lg="6">
					
						<FormItem label="开始时间" prop="started_at">
							<DatePicker @on-change="changeStartedDate" :value="vform.started_at" type="date" show-week-numbers placement="bottom-end" placeholder="请选择开始时间"></DatePicker>
						</FormItem>
					</Col>
					<Col :xs="24" :sm="12" :md="6" :lg="6">
						<FormItem label="结束时间" prop="end_at">
							<DatePicker @on-change="changeEndDate" :value="vform.end_at" type="date" show-week-numbers placement="bottom-end" placeholder="请选择结束时间"></DatePicker>
						</FormItem>
					</Col>
					<Col :xs="24" :sm="12" :md="6" :lg="6">
						<FormItem label="不可取消">
							<i-switch v-model="vform.noncancelable" size="large" :true-value="1" :false-value="0">
								<span slot="open">是</span>
								<span slot="close">否</span>
							</i-switch>
						</FormItem>
					</Col>
					<Col :xs="24" :sm="12" :md="12" :lg="12">
						<FormItem label="不可取消原因" prop="noncancelablemsg">
							<Input v-model="vform.noncancelablemsg" :disabled="vform.noncancelable==0"></Input>
						</FormItem>
					</Col>
					<Col :xs="24" :sm="24" :md="24" :lg="24">
						<FormItem label="产品分组" prop="classify">
							<Select disabled v-model="vform.classify" multiple >
								<Option v-for="(item,index) in classifyList" :value="item.value" :key="index">{{ item.label }}</Option>
							</Select>
						</FormItem>
					</Col>
					<Col :xs="24" :sm="24" :md="24" :lg="24">
						<FormItem label="备注">
							<Input v-model="vform.memo"></Input>
						</FormItem>
					</Col>
				</Row>
			</Col>

			<Col :xs="24" :sm="24" :md="6" :lg="6">
				<Card >
					<p slot="title">
						<Icon type="ios-film-outline"></Icon>
						结算信息
					</p>

					<div style="padding-left:10px;padding-right:10px;padding-bottom:10px">

						<FormItem label="总金额" >
							+ {{amount}}
						</FormItem>
						<FormItem label="优惠金额">
							- {{vform.discount}}
						</FormItem>
						<Divider />
						<FormItem label="付款金额">
							= {{amount-vform.discount}}
						</FormItem>
						
						<Button type="success" @click="onSave">保存</Button>
						
					</div>
				</Card>
			</Col>
		</Row>
	</Form>

	<Listener-Selector :show.sync="showBox" @on-hide="showBox=false" @on-change="onListenerChange" :type="1"></Listener-Selector>
	<Listener-Selector-User :show.sync="showBox2" @on-hide="showBox2=false" @on-change="onListenerChange" :type="0"></Listener-Selector-user>
	<Product-Selector :uid.sync="listenerObj.uid" :show.sync="showProductBox" @on-hide="showProductBox=false" @on-change="onProductChange"></Product-Selector>
	

</div>
</template>
<script>
// 引入子组件
import ProductSelector from '@/components/ProductSelector/ProductSelector.vue'
import ListenerSelector from '@/components/ListenerSelector/ListenerSelector.vue'
import ListenerSelectorUser from '@/components/ListenerSelector/ListenerSelector.vue'
import {mapState,mapGetters} from 'vuex'
import { isNullOrUndefined } from 'util';
import { Divider, Tag, Card, Page, Modal, Spin, Row, Col, ButtonGroup, Button,  Breadcrumb, BreadcrumbItem, Icon, Form, FormItem, Input, Select, Option, DatePicker, InputNumber } from 'iview';
export default { 
	name:'welisten-order-create',
	components: { Divider, Tag, Card, Page, Modal, ProductSelector, ListenerSelector, ListenerSelectorUser, Spin, Row, Col, ButtonGroup, Button, Breadcrumb, BreadcrumbItem, Icon, Form, FormItem, Input, Select, Option, DatePicker, InputNumber},
	data () {
		return {
			title:'新建',
			showProductBox:false,
			productObj:{id:0},
			showBoxFlag:false,
			showBox:false,
			showBox2:false,
			vstep:0.01,
			maxQty:0,
			listenerObj:{uid:0},
			userObj:{},
			ruleValidate: {
				nickname: [
					{ required: true, message: '请选择用户', trigger: 'blur' },
				],
				status: [
					{ required: true, message: '请填写状态', trigger: 'change', type:'number' }
				],
				sequence: [
					{ required: true, message: '请填写权重', trigger: 'change', type:'number' }
				],
				lnickname: [
					{ required: true, message: '请选择倾听者', trigger: 'blur' },
				],
			},
			

			vform:{
				status: 0,
				nickname: null,
				sequence:1,
				memo:'',
				uid:'',
				content:'',
				product_type:0,
				service_type:0,
				noncancelable:0,
				qty:0,
				price:0,
				discount:0,
			},
			classifyList:[]
		}
	},
	methods:{
		init:function(){
			
			let self=this
			self.$store.dispatch("setSpinShow",true)

			function action1(){return self.$http.get("/v1/welisten/listeners/tags",{params: { 'token': self.token }})}
			
			self.$http.all([action1()])
			.then(self.$http.spread(function (response1){
				if(200==response1.data.status && 0==response1.data.code)
				{
					response1.data.data.forEach(item=>{
						self.classifyList.push({value: item.id,label: item.name})
					})
					
				}else{self.$Message.error(response1.data.message)}
				
				self.$store.dispatch("setSpinShow",false)
			})).catch(self.$http.spread(function (error1) {
				self.$store.dispatch("setSpinShow",false)
			}))
		},

		onSave:function(index){
			let self=this
			let _flag=true
			this.$refs.vform.validate((valid) => {
				if (!valid){
					this.$Message.error('请完成必填项')
					_flag=false
				}
			})
			if(!_flag){return}
			
			let _data = JSON.parse(JSON.stringify(self.vform))
			_data.started_at=self.vform.started_at.getTime()/1000
			_data.end_at=self.vform.end_at.getTime()/1000

			self.$store.dispatch("setSpinShow",true)
			self.$http.post("/v1/welisten/orders?token="+self.token,{'data':JSON.stringify(_data)})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.$Message.success('操作成功')
					self.$router.push({path:'/welisten/order/edit/'+response.data.data.id})
				}else{
					self.$Message.error(response.data.message)
				}
				self.$store.dispatch("setSpinShow",false)
			}).catch(function(error){
				self.$Message.error(error.message)
				self.$store.dispatch("setSpinShow",false)
			})
		},
		onSelectUser:function(){
			this.showBoxFlag=false
			this.showBox2=true
		},
		onSelectListener:function(){
			this.showBoxFlag=true
			this.showBox=true
		},
		onListenerChange:function(obj){
			if(this.showBoxFlag){
				this.listenerObj=obj
				this.vform.luid=this.listenerObj.uid
				this.vform.lnickname=this.listenerObj.nickname
			}else{
				this.userObj=obj
				this.vform.uid=this.userObj.uid
				this.vform.nickname=this.userObj.nickname
			}
		},

		
		onSelectProduct:function(){
			if(this.listenerObj.uid>0)this.showProductBox=true
		},
		onProductChange:function(obj){
			this.productObj=obj
			this.vform.service_type=0==this.productObj.service_type?0:1
			this.vform.product_type=0==this.productObj.product_type?1:0
			this.vform.classify=this.productObj.classify
			this.vform.title=this.productObj.title
			this.vform.started_at=new Date(this.productObj.started_at*1000)
			this.vform.end_at=new Date(this.productObj.end_at*1000)
			this.productObj.classify=this.productObj.classify.substr(1,this.productObj.classify.length-2)
			this.vform.classify=this.productObj.classify.split(',')
			this.vform.product_id=this.productObj.id
			if(1==this.productObj.service_type){
				this.vstep=parseInt(this.productObj.percallstep)
				this.vform.qty=parseInt(this.productObj.percallstep)
				this.maxQty=this.vform.qty*parseInt(this.productObj.multiple)
				this.vform.price=parseFloat(this.productObj.percallprice)
			}
			else{
				this.vstep=parseInt(this.productObj.pertextstep)
				this.vform.qty=parseInt(this.productObj.pertextstep)
				this.maxQty=this.vform.qty*parseInt(this.productObj.multiple)
				this.vform.price=parseFloat(this.productObj.pertextprice)
			}
			
			
			
		},
		
		changeStartedDate:function(val, obj){
			this.vform.started_at=new Date(val)
		},
		changeEndDate:function(val, obj){
			this.vform.end_at=new Date(val)
		},
	},
	created:function(){
	},
	mounted () {
		this.init()
    	this.setTitle(this.title)
	},
	activated:function(){
	},
	computed:{
		...mapGetters(['token','menuIndex']),
		amount:function(){
			return isNullOrUndefined(this.vform.qty) || isNullOrUndefined(this.vform.price)? 0:parseFloat(this.vform.qty*this.vform.price).toFixed(2)
		}
	},
}



</script>

<style lang="less" scoped>
</style>